<template>
	<div class="app">
    <div class="title">
		<!-- 顶部搜素部分 -->
		<div class="search">
			<div class="block">
				<el-select v-model="State" placeholder="请选择用户状态" clearable >
					<el-option v-for="item in UserState" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-select v-model="Grade" placeholder="请选择用户会员等级" clearable >
					<el-option v-for="item in MembershipGrade" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-select v-model="Gendersd" placeholder="请选择用户性别" clearable >
					<el-option v-for="item in Gender" :key="item.value" :label="item.label" :value="item.value"> -->
					 </el-option>
				</el-select>
			</div>
			<!--用户id和昵称 -->
			<div class="topinput">
				<el-input class="inputsame" v-model="input" placeholder="请输入用户id"></el-input>
				<el-input class="inputsame" v-model="inputs" placeholder="请输入昵称"></el-input>
        <el-button type="primary" icon="el-icon-search" class="searchlogo" @click="searchlogo">查找</el-button>
			</div>
		</div>
        <el-button type="primary" icon="el-icon-edit" class="addlogo">添加用户</el-button>
        <!-- 表格内容 -->
          <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="用户ID" align="center" sortable></el-table-column>
                <el-table-column prop="nickname" label="昵称" align="center"></el-table-column>
                <el-table-column prop="phone" label="手机号码" align="center"></el-table-column>
                <el-table-column  label="性别" align="center">
                  <template slot-scope="scope">
							      <el-tag>{{ scope.row.gender == 1 ? "女" : "男" }}</el-tag>
						      </template>
                </el-table-column>
                <el-table-column  label="会员等级" align="center">
                  <template slot-scope="scope">
							      <el-tag>{{ scope.row.level == 1 ? "VIP会员" : "普通会员" }}</el-tag>
						      </template>
                </el-table-column>
                <el-table-column label="生日" align="center"></el-table-column>
                <el-table-column  label="状态" align="center">
                  <template slot-scope="scope">
							      <el-tag>{{ scope.row.level == 1 ? "激活" : "冻结" }}</el-tag>
						      </template>
                </el-table-column>
                <el-table-column prop="gmtLastLogin" label="上次登录时间" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.gmtLastLogin | formatDate}}
                </template>
                </el-table-column>
                <el-table-column prop="lastLoginIp" label="上次登录IP" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="250px">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="Freeze(scope.$index, scope.row)">冻结</el-button>
                        <el-button size="mini" type="primary" @click="editor(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="Delete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
          </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :total="total" :current-page="pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
      </div>
	</div>
</template>

<script>
import { roleList } from "../encapsulation/MemberManagement";
export default {
  data() {
    return {
      State: "", //请选择用户状态(搜素框输入的值)
      Grade: "", //请选择用户会员等级(搜素框输入的值)
      Gendersd: "", //请选择用户性别(搜素框输入的值)
      pageNo: 1, // 默认页数
      pageSize: 20, // 页面条数
      total: 0, // 总共条数
      tableData: [], // 渲染的表格
      input: "", // 请输入用户id
      inputs: "", //  请输入昵称
      UserState: [
        { value: "冻结", label: "冻结" },
        { value: "激活", abel: "激活" },
        { value: "全部", label: "全部" },
      ],
      MembershipGrade: [
        { value: "普通会员", label: "普通会员" },
        { value: "VIP会员", label: "VIP会员" },
        { value: "全部", label: "全部" },
      ],
      Gender: [
        { value: "男", label: "男" },
        { value: "女", label: "女" },
        { value: "全部", label: "全部" },
      ],
    };
  },
  methods: {
    //获取角色列表
    getlist() {
      let roleLister = {
        pageNo: this.pageNo, //默认页数
        limit: this.pageSize, //页面条数
        id: this.input, //用户id
        nickname: this.inputs, //用户昵称
        level: this.Grade, //用户等级
        gender: this.Gendersd, //用户性别
        status: this.status, //用户状态
      };
      roleList(roleLister).then((res) => {
        console.log(res);
        this.tableData = res.data.data.items;
        this.total = res.data.data.total;
      });
    },
    // 查找
    searchlogo() {
      (this.pageNo = 1), (this.limit = 20), this.getlist();
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getlist();
    },
  },
  // 上次登录时间
  filters: {
    formatDate(value) {
      let date = new Date(value);
      let MM = date.getMonth() + 1;
      MM = MM < 13 ? MM : MM; //月
      let d = date.getDate();
      d = d < 13 ? d : d; //日
      let h = date.getHours();
      h = h < 13 ? h : h; //时
      let m = date.getMinutes();
      m = m < 13 ? m : m; //分
      return MM + "月" + d + "日" + h + "时" + m + "分";
    },
  },
  created() {
    this.getlist();
  },
};
</script>
<style scoped lang="less">
.app {
  padding: 20px;
  height: 100%;
  overflow: hidden !important;
  position: relative;
}
.title {
  position: absolute;
  left: 0;
  top: 0;
  right: -17px;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 20px;
}
.topinput {
  display: flex;
}
.inputsame {
  width: 200px;
}
.search {
  display: flex;
  padding: 5px 0;
  align-items: center;
}
.block {
  padding: 10px 0;
}
.block/deep/.el-select {
  padding: 0 3px;
}
.topinput/deep/.inputsame {
  padding: 0 3px;
}
.addlogo {
  margin: 10px 0;
}
.search/deep/.el-select {
  width: 200px;
}
</style>
